<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { type UploadProps, type UploadUserFile, type UploadFile, ElMessage } from 'element-plus'
import { ref } from 'vue'
import type { Result } from '@/types/systemType/AllType.ts'
const fileList = ref<UploadUserFile[]>([

])


const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {

   // 检查 response 是否存在
  if (!uploadFile.response) {
    return;
  }
  fileList.value.push(uploadFile)
  let resultData:Result = uploadFile.response as Result

  console.log(fileList.value)
  if (resultData.code === "500"){
    fileList.value.pop()

    ElMessage({
      message:uploadFile.name+"上传失败！"+resultData.message,
      type:"error",
    })
    console.log("上传失败")
  }else {
    ElMessage({
      message: uploadFile.name+"上传成功！",
      type: 'success',
    })
    console.log("上传成功")
  }
}

const tableRowClassName = ({
  row,
  rowIndex,
  }:{
  row: UploadUserFile
  rowIndex: number
}) => {
  console.log("内容",rowIndex%2)
  if (rowIndex%2 === 0) {
    return 'success-row'
  }
  return ''
}

</script>

<template>
  <div class="knowledgeImp_container">
    <el-upload
      class="upload-demo"
      :show-file-list="false"
      :drag="true"
      action="/dev-api/agent/document"
      multiple
      name="file"
      accept=".pdf"
      :on-change="handleChange"
    >
      <el-icon class="el-icon__upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          请上传pdf文件,单个文件大小不超过10MB
        </div>
      </template>
    </el-upload>
    <div class="file_table">
      <el-table
        :data="fileList"
        :row-class-name="tableRowClassName"
      >
        <el-table-column width="auto" prop="name"/>
        <el-table-column width="60" class="image-container">
          <template #default>
            <div class="image-container">
              <el-image src="/src/assets/img/upload.png" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.knowledgeImp_container{
  background-color: white;
  width: 100%;
  height: 100vh;
}
.upload-demo{
  padding: 100px 100px;
  margin: 0 auto;
}
.el-icon__upload{
  height: 200px;
  width: 200px;
}
:deep(.el-icon.el-icon__upload svg){
  height: 100px;
  width: 100px;
  color: #fce38a;
}
:deep(.el-icon.el-icon--close){
  display: none;
}


:deep(.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.file_table{
  width: 100%;
  padding: 0 100px;
  margin: 100px auto;
}


.image-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 占满单元格高度 */
}

.el-image {
  width: 20px;
  height: 20px;
  object-fit: cover; /* 确保图片不变形 */
}
</style>